<template>
  <div class="code-panel">
    <CodeMirror ref="cmEditor" class="cm-editor" v-model:value="localCode" :options="cmOptions" :events="events" />
  </div>
</template>

<script>
// region codemirror

import "codemirror/lib/codemirror.css";
// 代码高亮
import "codemirror/mode/javascript/javascript";
// 主题
import "codemirror/theme/idea.css"; //panda-syntax
// vim keyMap
import "codemirror/addon/dialog/dialog.css";
import "codemirror/keymap/sublime";
import "codemirror/addon/search/search";
import "codemirror/addon/search/searchcursor";
import "codemirror/addon/dialog/dialog";
// 代码折叠
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/foldgutter";
import "codemirror/addon/fold/brace-fold";
import "codemirror/addon/fold/comment-fold";
// 全屏
import "codemirror/addon/display/fullscreen.css";
import "codemirror/addon/display/fullscreen";
// 括号匹配
import "codemirror/addon/edit/matchbrackets";
import "codemirror/addon/edit/closebrackets";
// 自动补全
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/hint/javascript-hint";
import "codemirror/addon/hint/anyword-hint";
// 行注释
import "codemirror/addon/comment/comment";
// 代码错误
import jsonlint from "jsonlint-mod";
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/lint/lint";
import "codemirror/addon/lint/json-lint";
import CodeMirror from "./components/codemirror.vue";
window.jsonlint = jsonlint;
// endregion

export default {
  name: "GdCodemirror",
  props: {
    code: {
      type: String,
      default: "",
    },
    lang: {
      type: String,
      default: "javascript",
    },
  },
  data: () => ({
    localCode: "{}",
    cmOptions: {
      // Js高亮显示
      mode: {
        name: "javascript",
        json: true,
      },
      tabSize: 2,
      indentUnit: 2, // 缩进单位，默认2
      smartIndent: true, // 是否智能缩进
      // 显示行号
      styleActiveLine: true,
      lineNumbers: true,
      // 设置主题
      theme: "idea",
      // 绑定Vim
      keyMap: "sublime",
      // 代码折叠
      lineWrapping: true,
      foldGutter: true,
      gutters: [
        "CodeMirror-linenumbers",
        "CodeMirror-foldgutter",
        "CodeMirror-lint-markers",
      ],
      // CodeMirror-lint-markers是实现语法报错功能
      lint: true,

      // 全屏模式
      fullScreen: false,

      // 括号匹配
      matchBrackets: true,
      autoCloseBrackets: true,
    },
    events: {
      /* cursorActivity: () => {
        //获取用户当前的编辑器中的编写的代码
        var words = this.codemirror.getValue() + "";
        //利用正则取出用户输入的所有的英文的字母
        words = words.replace(/[a-z]+[\-|\']+[a-z]+/gi, "").match(/([a-z]+)/gi);
        //将获取到的用户的单词传入CodeMirror,并在javascript-hint中做匹配
        this.codemirror.ukeys = words;
        //调用显示提示
        this.codemirror.showHint();
      }, */
    },
  }),
  watch: {
    code: {
      handler(newVal, oldVal) {
        this.localCode = newVal;
      },
      immediate: true,
    },
    lang: {
      handler(newVal, oldVal) {
        let mode = "javascript";
        if (newVal === "json") {
          mode = {
            name: "javascript",
            json: true,
          };
        } else {
          mode = newVal;
        }
        this.cmOptions.mode = mode;
      },
      immediate: true,
    },
  },
  computed: {
    codemirror: function () {
      return this.$refs.cmEditor.codemirror;
    },
  },
  components: {
    CodeMirror,
  },
  mounted() {
    this.codemirror.setSize("100%", "100%");
  },
  beforeUnmount() {
    this.destroy();
  },
  methods: {
    destroy() {
      const element = this.codemirror.doc.cm.getWrapperElement();
      element && element.remove && element.remove();
    },
  },
};
</script>

<style lang="scss" scoped>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
} */

.code-panel {
  width: 100%;
  max-width: 700px;
  border: #16b0f6 1px solid;
  margin: 0 auto;
  overflow: hidden;
  min-height: 400px;
  .cm-editor {
    width: 100%;
    height: 100%;
    //overflow-y: scroll;
  }
}
</style>
